<template>
  <div>
    <V-CommonHeaderLeft>
      <div id="app">
        <el-row>
          <!-- 头部 -->
          <div class="header">
            <el-col :span="4" class="header-nav">
              <router-link to="/">首页&nbsp;&nbsp;/</router-link>
              <router-link to="/">营销&nbsp;&nbsp;/</router-link>
              <router-link to="/">商品促销&nbsp;&nbsp;/</router-link>
              <router-link to="/">促销详情</router-link>
            </el-col>
          </div>
        </el-row>
        <!-- 第二部分 -->
        <div class="contents">
          <div class="contents-header">
            <h3>促销详情</h3>
            <div class="copy">
              <!-- <img src="" alt=""> -->
              <span></span>
              <div>
                <router-link to="/marketingGoodsCopy">复制新增</router-link>
              </div>
            </div>
          </div>
          <el-row class="contents-details">
            <el-col :span="2">
              <div class="contents-details-left">
                <p>促销标题</p>
                <p>促销时间</p>
                <p>阶梯促销</p>
                <p>促销规则</p>
                <p>客户类型</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="contents-details-center">
                <p>单品满赠</p>
                <p>2019-06-03 08:53 ~ 2019 06-03 08:57</p>
                <p>启用</p>
                <p>
                  <span>买赠</span>
                  <span>订单满赠</span>
                  <span>单笔订货金额≥</span>
                  <span>100</span>
                  <span>元</span>
                  <span>，获赠品</span>
                  <span>VB钙片(一个月量)</span>
                  <span>10</span>
                  <span>个</span>
                </p>
                <p>普通代理商、VIP代理商、一级经销商、二级经销商</p>
              </div>
            </el-col>
            <el-col :span="1" :offset="7">
              <img src class="rightImg">
            </el-col>
          </el-row>
          <div class="table">
            <el-row class="table-one">
              <el-col :span="2">序号</el-col>
              <el-col :span="2">规格图</el-col>
              <el-col :span="7">商品名称/商品编号</el-col>
              <el-col :span="6">规格名称/规格编号</el-col>
              <el-col :span="3">单位</el-col>
              <el-col :span="4">销售价</el-col>
            </el-row>
            <el-row class="table-two" v-for="(site,key) in data" :key="key">
              <el-col
                :span="2"
                class="xuhao"
                style="border:1px solid #E3E3E3;border-top:0;border-right:0"
              >{{++key}}</el-col>
              <el-col
                :span="2"
                style="border-left:1px solid #E3E3E3;border-bottom:1px solid #e3e3e3"
              >{{site.url}}</el-col>
              <el-col
                :span="7"
                style="text-align:left;padding-left:10px;border:1px solid #e3e3e3;border-right:0;border-top:0"
              >
                <span>{{site.goodsName}}</span>
                <span>{{site.goodsBian}}</span>
              </el-col>
              <el-col :span="6" style="border:1px solid #E3E3E3;border-right:0;border-top:0;">
                <span>{{site.guiName}}</span>
                <span>{{site.guiBian}}</span>
              </el-col>
              <el-col
                :span="3"
                style="border:1px solid #E3E3E3;border-right:0;border-top:0;"
              >{{site.dan}}</el-col>
              <el-col
                :span="4"
                style="border:1px solid #E3E3E3;border-right:0;border-top:0;"
              >￥{{site.price}}</el-col>
            </el-row>
          </div>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from './../common/vCommonHeaderLeft/VCommonHeaderLeft'
export default {
  components: {
    VCommonHeaderLeft
  },
  data () {
    return {
      data: [
        {
          url: '图片地址',
          goodsName: '现在沙发北欧风格沙发',
          goodsBian: '2645896+65',
          guiName: '100*100*240',
          guiBian: 'CSA-4506-A2',
          dan: '张',
          price: 5520
        }, {
          url: '图片地址',
          goodsName: '现在沙发北欧风格沙发',
          goodsBian: '2645896+65',
          guiName: '100*100*240',
          guiBian: 'CSA-4506-A2',
          dan: '张',
          price: 5520
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  width:100%;
  background-color: #f2f5f7;
  height: 100%;
  padding: 15px 10px 0px 10px;
}
.header {
  height: 45px;
  .header-nav {
    line-height: 30px;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    padding-left: 10px;
    span {
      display: inline-block;
      margin-left: 10px;
    }
    a {
      color: #999999;
    }
    a:hover {
      color: #20ade5;
    }
  }
  .header-img {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #dce4e7;
  }
}
.header-nav a:nth-child(4) {
  color: #333;
}
.header-nav a:nth-child(4):hover {
  color: #333;
}
.contents {
  margin: 0px 10px;
  background-color: #fff;
}
.contents-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e3e3e3;
  padding: 15px 45px 0px 25px;
}
.contents-header > h3 {
  color: #20ade5;
  font-size: 16px;
  letter-spacing: 1px;
  border-bottom: 2px solid #20ade5;
  width: 110px;
  padding-bottom: 15px;
  text-align: center;
}
.copy {
  display: flex;
}
.copy span:nth-child(1) {
  display: block;
  width: 18px;
  height: 18px;
  background-color: #20ade5;
  border-radius: 50%;
  margin-top: 3px;
}
.copy > div > a {
  color: #20ade5;
  margin-left: 5px;
}
.contents-details {
  padding: 30px 0px 0px 25px;
  font-size: 14px;
  color: #666666;
}
.contents-details-left {
}
.contents-details-left > p {
  line-height: 35px;
}
.contents-details-center {
  line-height: 35px;
}
.contents-details-center > p:nth-child(4) span:nth-child(1) {
  width: 35px;
  height: 20px;
  background-color: #ff3838;
  color: #fff;
  font-size: 12px;
  display: inline-block;
  text-align: center;
  line-height: 20px;
  border-radius: 3px;
  margin-right: 5px;
}
.contents-details-center > p:nth-child(4) span:nth-child(4) {
  width: 100px;
  border-bottom: 1px solid #e3e3e3;
  display: inline-block;
  text-align: center;
  line-height: 20px;
}
.contents-details-center > p:nth-child(4) span:nth-child(4):hover {
  border-bottom: 1px solid #20ade5;
}
.contents-details-center > p:nth-child(4) span:nth-child(7) {
  color: #20ade5;
}
.contents-details-center > p:nth-child(4) span:nth-child(8) {
  width: 100px;
  border-bottom: 1px solid #e3e3e3;
  display: inline-block;
  text-align: center;
  line-height: 20px;
}
.contents-details-center > p:nth-child(4) span:nth-child(8):hover {
  border-bottom: 1px solid #20ade5;
}
.contents-details-center > p:last-child {
  color: #333;
}
.rightImg {
  width: 105px;
  height: 105px;
  border: 1px solid;
  border-radius: 50%;
  margin-top: 20px;
}
.table {
  width: 90%;
  color: #666;
  font-size: 12px;
  border-right: 1px solid #e3e3e3;
  margin: 15px 0px 0px 25px;
}
.table-one {
  height: 50px;
  background-color: #fcfcfc;
  line-height: 50px;
  text-align: center;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  border-left: 1px solid #e3e3e3;
}
.table-two {
  height: 75px;
  line-height: 75px;
  text-align: center;
}
.xuhao {
}
</style>
